
/**
 * Aligning segmented buttons vertically is a simple as setting the `vertical` config to `true`.
 */
Ext.define('KitchenSink.view.button.VerticalSegmentedButtons', {
    extend: 'Ext.Container',
    xtype: 'vertical-segmented-buttons',
    controller: 'segmented-buttons',

    layout: 'column',
    width: 475,

    defaultType: 'fieldcontainer',
    defaults: {
        labelAlign: 'top',
        margin: '0 20 0 0'
    },

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Disabled',
        columnWidth: 1,
        margin: '0 0 20 0',
        listeners: {
            change: 'toggleDisabled'
        }
    }, {
        fieldLabel: 'Toggle Group',
        columnWidth: 0.25,
        items: [{
            xtype: 'segmentedbutton',
            vertical: true,
            items: [{
                text: 'Option One'
            }, {
                text: 'Option Two',
                pressed: true
            }, {
                text: 'Option Three'
            }]
        }]
    }, {
        fieldLabel: 'Multiple Toggle',
        columnWidth: 0.25,
        items: [{
            xtype: 'segmentedbutton',
            vertical: true,
            allowMultiple: true,
            pressedButtons: [0, 2],
            items: [{
                text: 'Option One'
            }, {
                text: 'Option Two'
            }, {
                text: 'Option Three'
            }]
        }]
    }, {
        fieldLabel: 'No Toggle',
        columnWidth: 0.25,
        items: [{
            xtype: 'segmentedbutton',
            vertical: true,
            allowToggle: false,
            items: [{
                text: 'Option One'
            }, {
                text: 'Option Two'
            }, {
                text: 'Option Three'
            }]
        }]
    }, {
        fieldLabel: 'Icons/Arrows',
        columnWidth: 0.25,
        items: [{
            xtype: 'segmentedbutton',
            vertical: true,
            allowToggle: false,
            items: [{
                iconCls: 'button-home-small',
                text: 'Button'
            }, {
                text: 'Menu Button',
                menu: [
                    { text: 'Menu Item 1' },
                    { text: 'Menu Item 2' },
                    { text: 'Menu Item 3' }
                ]
            }, {
                xtype: 'splitbutton',
                text: 'Split Button',
                menu: [
                    { text: 'Menu Item 1' },
                    { text: 'Menu Item 2' },
                    { text: 'Menu Item 3' }
                ]
            }]
        }]
    }]
});

Ext.define('com.wxg.view.button.VerticalSegmentedButtons', {
    extend: 'Ext.Container',
    xtype: 'com_wxg_vertical_segmented_buttons',
    controller: 'segmented-buttons',

    layout: 'center',

    items: [{
		xtype: 'segmentedbutton',
		width: 475,
		vertical: true,
		items: [{
			text: 'Option One'
		}, {
			text: 'Option Two',
			pressed: true
		}, {
			text: 'Option Three'
		}]
	}]
});


Ext.define('KitchenSink.view.button.SegmentedButtonsController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.segmented-buttons',

    toggleDisabled: function (checkbox, checked) {
        var view = this.getView(),
            stateFn = checked ? 'disable' : 'enable',
            buttons = view.query('segmentedbutton');

        Ext.each(buttons, function (btn) {
            btn[stateFn]();
        });
    }
});




Ext.onReady(function(){
	Ext.themeName = 'classic';
	/*var viewBorderLayoutDemo = Ext.create({
		xtype: 'layout-border',
		x: 20, 
		y: 20,
		renderTo: Ext.getBody()
	});*/
	// vertical-segmented-buttons
	/*var vertical_segmented_buttons = Ext.create({
		xtype: 'vertical-segmented-buttons',
		x: 80,
		y: 20,
		renderTo: Ext.getBody()
	});*/
	//com_wxg_vertical_segmented_buttons
	Ext.create({
		xtype: 'panel',
		title: 'Panel',
		x: 20, y: 20,
		width: 1000, height: 500,
		layout: 'vbox',
		items: [
			{
				xtype: 'vertical-segmented-buttons',
				margin: '0 0 0 10',
				height: 200
			},
			{
				xtype: 'panel',
				layout: 'hbox',
				items: [
					{
						xtype: 'panel',
						title: 'panel001',
						width: 100,
						html: '111'
					},
					{
						xtype: 'panel',
						title: 'panel002',
						width: 475,
						items: [
							{
								xtype: 'com_wxg_vertical_segmented_buttons'
							}
						]
					}
				]
			}
		],
		renderTo: Ext.getBody()
	});
});

